<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<fieldset class="form-container " style="width:80%;margin-left:5%;"> 


    <legend class="form-title"><h2>Visualiser un bulletin de paie entre ${bulletin.contrat.adherent.nomPrenom} et ${bulletin.contrat.employe.nom}&nbsp;${bulletin.contrat.employe.prenom} ${bulletin.etatBulletin}</h2></legend>
    <fieldset style="float: left;position: relative;margin-left:4%;">
        <legend class="form-title">L'adh&eacute;rent</legend>
        <table >
            <tbody>
                <tr><td style="width : 35%">Nom Pr&eacute;nom :</td><td>${bulletin.contrat.adherent.nomPrenom}</td></tr>

                <tr class="alt"><td>Adresse :</td><td>${bulletin.contrat.adherent.adresse}<br/>
                        ${bulletin.contrat.adherent.complementAdresse}<br/>
                        ${bulletin.contrat.adherent.codePostal}- ${bulletin.contrat.adherent.ville}</td></tr>
                <tr class="alt"><td>T&eacute;l&eacute;phone :</td>
                    <td>${bulletin.contrat.adherent.telephone}</td></tr>
                <tr><td>Mobile :</td>
                    <td>${bulletin.contrat.adherent.mobile}</td></tr>

                <tr  class="alt"><td>Num&eacute;ro Urssaf :</td><td>${bulletin.contrat.adherent.numUrssaf}</td></tr>
                <tr ><td>Num&eacutero Siret :</td><td>${bulletin.contrat.adherent.numSiret}</td></tr>
            </tbody>
        </table>
    </fieldset>
    <fieldset style="float: left;position: relative;margin-left: 10%;">
        <legend class="form-title">L'employ&eacute;</legend>
        <table>
            <tbody>
                <tr><td style="width : 40%">Nom Pr&eacute;nom :</td><td>${bulletin.contrat.employe.nom}&nbsp;${bulletin.contrat.employe.prenom}</td></tr>
                <tr class="alt"><td >Nom jeune fille :</td><td>${bulletin.contrat.employe.nomJeuneFille}</td></tr>

                <tr><td>Adresse :</td><td>${bulletin.contrat.employe.adresse}<br/>
                        ${bulletin.contrat.employe.complementAdresse}<br/>
                        ${bulletin.contrat.employe.codePostal}- ${bulletin.contrat.employe.ville}</td></tr>
                <tr class="alt"><td>Num&eacute;ro de t&eacute;l&eacute;phone :</td>
                    <td>${bulletin.contrat.employe.telephone}</td></tr>
                <tr ><td>Mobile :</td>
                    <td>${bulletin.contrat.employe.mobile}</td></tr>

                <tr class="alt"><td>Num&eacute;ro S&eacute;curit&eacute; social:</td><td>${bulletin.contrat.employe.numSecu}</td></tr>

            </tbody>
        </table>
    </fieldset>


    <fieldset style="clear :left;margin-top: 10%;">
        <legend class="form-title">Informations sur le bulletin</legend>
        <div style="float: left;position: relative">
            <div class="form-title">Periode du bulletin :  <fmt:formatDate pattern="MM yyyy"  value="${bulletin.periode}"  /> </div>

            <div class="datagrid">
                <table >
                    <thead>
                        <tr><th>Nom de la ligne</th><th>Nombre</th><th>Taux</th></tr>

                    </thead>
                    <tbody>
                        <c:forEach var="ligne" items="${bulletin.ligneHoraire}" varStatus="statusL">
                            <tr>
                                <td>${ligne.nom}</td>
                                <td>${ligne.nombre}</td>
                                <td>${ligne.tauxHoraire}</td>

                            </tr>

                        </c:forEach>

                    </tbody>
                </table>
            </div>

            <div class="form-title">A d&eacute;duire  : ${bulletin.aDeduire}</div>
            <div class="form-title">A payer  : ${bulletin.aPayer}</div>
        </div>
        <div style="float: left;position: relative;margin-left: 25px;">
            <div class="form-title">Charge salarial :  ${bulletin.chargeSalarial}</div>
            <div class="form-title">Charge patronal :  ${bulletin.chargePatronale}</div>
            <div class="form-title">Salaire imposable :  ${bulletin.salaireImposable}</div>
            <div class="form-title"> Salaire net &agrave;payer :  ${bulletin.salaireNetAPayer}</div>


        </div>
    </fieldset>

    <div class="submit-container" style=" clear: left;">
        <a href="/download/Bulletin/get.do?id=${bulletin.id}" class="submit-button">T&eacute;l&eacute;charger</a>
        <c:if test="${bulletin.etatBulletin!='declare' &&  bulletin.etatBulletin!='archive'}">
            <a id="updateBulletin" href="/bulletin/update.do?id=${bulletin.id}" class="submit-button">Modifier</a> 

            <a id="delBulletin" href="/bulletin/delete.do?id=${bulletin.id}" class="submit-button">Supprimer</a>
        </c:if>
        <a href="/bulletin/index.do" class="submit-button">Annuler</a>
    </div>

</fieldset>
<c:if test="${bulletin.etatBulletin=='imprime'}"> 
    <script>
        $(function() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "Confirmer": function() {

                        $(this).dialog("close");
                        window.location = "/bulletin/update.do?id=${bulletin.id}";
                    },
                    "Annuler": function() {
                        $(this).dialog("close");
                    }
                }
            });

            $("#updateBulletin").click(function(e) {
                e.preventDefault();
                $("#dialog").dialog("open");
            });
        });
    </script>

    <div id="dialog" title="Confirmer la modification">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Le bulletin a &eacute;t&eacute; d&eacute;j&agrave; t&eacute;l&eacute;charg&eacute;.<br/>
            Voulez vous le modifier ?
        </p>
    </div>

</c:if>